<script setup lang="ts">
import { computed } from "vue";
import {
  ElButton,
  ElCheckbox,
  ElCheckboxGroup,
  ElCol,
  ElDatePicker,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElRow,
} from "element-plus";
import { ProInputNumber, ProRadioGroup } from "@/modules/package/form";
import ProSelect from "@/modules/package/form/components/ProSelect.vue";
import PickerTimeRange from "@/components/common/PickerTimeRange.vue";

import ApiActivity from "@/api/activity";
import useEnum from "@/hooks/useEnum";
import useForm from "@/hooks/useForm";
import { TEtime } from "@/types/global";

const { act_id, source, list } = defineProps<{
  act_id: number;
  source?: TEtime;
  list: TEtime[];
}>();

const emits = defineEmits<{
  success: [];
}>();

const { list: listStatus } = useEnum("EnumStatus");
const { list: listEtimeType } = useEnum("EnumEtimeType");

const { refForm, isFetching, model, submit, reset, onFetchResponse } =
  useForm<TEtime>(source ? ApiActivity.etimeEdit : ApiActivity.etimeAdd, {
    defaultModel: Object.assign(
      {
        act_id,
        etime_type: 1,
        status: 1,
        sort: 99,
        etime_ids: "",
        etime_day: "",
        start_time: "",
        end_time: "",
      },
      source
    ),
  });

onFetchResponse(() => {
  ElMessage.success("操作成功！");
  emits("success");
});

const rules = {
  sort: { required: true, message: "请输入排序值" },
  etime_title: { required: true, message: "请输入场次名称" },
  etime_type: { required: true, message: "请选择场次类型" },
  etime_day: { required: true, message: "请选择场次日期" },
  start_time: { required: true, message: "请选择场次时间" },
  etime_ids: {
    required: true,
    message: "请选择场次",
    validator(_: any, value: string[], callback: Function) {
      if (value.length > 0) {
        callback();
      } else {
        callback(new Error("请选择场次"));
      }
    },
  },
};

const singleEtimes = computed({
  get() {
    const { etime_ids } = model.value;
    return etime_ids ? etime_ids.split(";").map(Number) : [];
  },
  set(val: string[]) {
    console.log("val", val);
    model.value.etime_ids = val.join(";");
  },
});

const singleEtimeOptions = computed(() => {
  return list.filter((e) => e.etime_type === 1);
});
</script>

<template>
  <ElForm ref="refForm" :model="model" :rules="rules" label-width="6em">
    <ElFormItem label="场次名称" prop="etime_title">
      <ElInput v-model="model.etime_title" />
    </ElFormItem>

    <ElFormItem label="场次名称" prop="etime_type">
      <ProSelect v-model="model.etime_type" :options="listEtimeType" />
    </ElFormItem>

    <template v-if="model.etime_type === 1">
      <ElFormItem label="场次日期" prop="etime_day">
        <ElDatePicker
          v-model="model.etime_day"
          value-format="YYYY-MM-DD"
          placeholder="选择日期"
          style="--el-date-editor-width: 100%"
        />
      </ElFormItem>

      <ElFormItem label="场次时间" prop="start_time">
        <PickerTimeRange
          v-model:start="model.start_time"
          v-model:end="model.end_time"
        />
      </ElFormItem>
    </template>

    <template v-else-if="model.etime_type === 2">
      <ElFormItem prop="etime_ids" label="选择场次">
        <ElCheckboxGroup v-model="singleEtimes">
          <ElCheckbox
            v-for="item in singleEtimeOptions"
            :key="item.id"
            :value="item.id"
            >{{ item.etime_title }}</ElCheckbox
          >
        </ElCheckboxGroup>
      </ElFormItem>
    </template>

    <ElRow :gutter="16">
      <ElCol :span="12">
        <ElFormItem label="场次状态" prop="status">
          <ProRadioGroup v-model="model.status" :options="listStatus" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="12">
        <ElFormItem label="排序" prop="sort">
          <ProInputNumber
            v-model="model.sort"
            :min="1"
            :max="9999"
            :precision="0"
          />
        </ElFormItem>
      </ElCol>
    </ElRow>

    <ElFormItem label="备注">
      <ElInput v-model="model.remark" type="textarea" />
    </ElFormItem>

    <ElFormItem>
      <ElButton plain :disabled="isFetching" @click="reset">重置</ElButton>
      <ElButton type="primary" :loading="isFetching" @click="submit"
        >提交</ElButton
      >
    </ElFormItem>
  </ElForm>
</template>
